<template>
    <div class="content-container">
        <div class="sys-header">
            <el-form :inline="true">
                <el-form-item label="关键字">
                    <el-input v-model="keyword" placeholder="请输入姓名或电话"/>
                </el-form-item>
                <el-form-item label="跟进类型">
                    <el-select v-model="stype">
                        <el-option v-for="(dict,index) in fellowType"
                                   :key="index - 1"
                                   :label="dict"
                                   :value="index - 1">

                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="queryDictItems">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="dictionaryItems" border>
            <el-table-column prop="id" label="编号"/>
            <el-table-column prop="customer.name" label="姓名"/>
            <el-table-column prop="traceTime" label="跟进日期" :formatter="DateFormatter"/>
            <el-table-column prop="traceDetails" label="跟进内容"/>
            <el-table-column prop="traceType.title" label="跟进方式"/>
            <el-table-column prop="traceResult" label="跟进结果"/>
            <el-table-column prop="inputUser.name" label="录入人"/>
            <el-table-column prop="displayType" label="跟进类型"/>
            <el-table-column label="操作" width="120">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" size="small" @click="editDep(scope.row)">编辑
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <section class="content-footer">
            <el-pagination
                    @size-change="sizeChangeFn"
                    @current-change="currentChangeFn"
                    background
                    layout="sizes, prev, pager, next, total"
                    :total="total"
                    :page-size="pageSize"
                    :page-sizes="[5, 10, 50, 100]"
            />
        </section>
        <trace-cust-dialog
                :tDialogVisible="dialogVisible"
                :tForm="tForm"
                :editID="editID"
                @closeTDialog="closeTDialog"
        />
    </div>
</template>

<script>
    import {
        getCusTraceHistoryApi,
        getSysDictionaryItemsApi,
        addSysDictionaryItemsApi,
        updateSysDictionaryItemsApi,
        delSysDictionaryItemsApi
    } from '@/request/api'

    import { DateFormat } from '@/utils/utils.js'

    import TraceCustDialog from '../customer/children/TraceCustDialog'

    export default {
        name: "CustomerTraceHistory",
        data() {
            return {
                selectDictionaryName: '',
                fellowType: ['全部', '潜在客户', '正式客户'],
                stype: -1,
                keyword: '',
                currentPage: 1,
                pageSize: 10,
                total: 0,
                dictionaryItems: [],
                dialogVisible: false,
                editID: null,
                tForm: {},
                depRules: {
                    title: [
                        {required: true, message: '请输入数据字典明细标题', trigger: 'blur'}
                    ],
                    sequence: [
                        {required: true, message: '请输入数据字典明细序号', trigger: 'blur'}
                    ]
                }
            }
        },
        components: {
            TraceCustDialog
        },
        methods: {
            queryDictItems() {
                getCusTraceHistoryApi({
                    currentPage: this.currentPage,
                    pageSize: this.pageSize,
                    keyword: this.keyword,
                    type: this.stype
                }).then(res => {
                    if (res.success === true) {
                        this.dictionaryItems = res.data.list
                        this.total = res.data.total
                    }
                })
            },
            sizeChangeFn(val) {
                this.pageSize = val
                this.queryDictItems()
            },
            currentChangeFn(val) {
                this.currentPage = val
                this.queryDictItems()
            },

            closeTDialog(reload) {
                this.dialogVisible = false
                if (reload) {
                    this.queryDictItems()
                }
            },
            // 编辑一条部门数据
            editDep(row) {
                this.$nextTick(() => {
                    this.tForm = {...row.customer, ...row}
                    this.$set(this.tForm, 'time', new Date(row.traceTime))
                })

                this.editID = row.id
                this.dialogVisible = true
            },
            // 格式化事件
            DateFormatter(row) {
                return DateFormat(row.traceTime)
            }
        },
        created() {
            this.queryDictItems()
        }
    }
</script>

<style lang="less" type="text/less" scoped>
    .sys-header {
        margin-bottom: 10px;
    }
</style>